<?xml version="1.0" encoding="UTF-8"?>
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	template="/WEB-INF/templates/public/default.xhtml"
>

	<f:metadata>
		<f:viewParam name="certId" value="#{qualificationCertHome.id}"></f:viewParam>
		<f:event listener="#{qualificationCertHome.initConversation()}" type="preRenderView"></f:event>
	</f:metadata>

	<ui:define name="head">
		<style type="text/css">
			.removeButton {
				float: right;
				margin-right: 20px;
			}
			
			td {
				padding-bottom: 10px;
			}
			
			label {
				font-weight: bold;
			}
			
			.photoItem {
				float: left;
			}
		</style>
		<h:outputStylesheet name="css/public/newuser-registration.css" />
		<h:outputStylesheet name="css/public/override_primefaces.css"></h:outputStylesheet>
		
	</ui:define>

	<ui:define name="content">

		<div class="sub_wrap">
			<div class="Methbox_tit">
				<h2>中介机构用户注册</h2>
				<span><p:link
					outcome="/index.xhtml"
					target="_blank"
				>平台首页</p:link> &gt;用户注册</span>
			</div>
			<div class="Methbox_con">
				<!--注册过程-->
				<div class="register-guocheng">
					<div class="fleft rg-guocheng nureg-cont">
						<span class="rg-span"> 1</span>
						<h4 class="rg-h4">平台注册协议</h4>
					</div>
					<div class="fleft rg-guocheng">
						<span class="rg-span"> 2</span>
						<h4 class="rg-h4">填写账号信息</h4>
					</div>
					<div class="fleft rg-guocheng2">
						<span class="rg-span2"> 3</span>
						<h4 class="rg-h42">注册成功</h4>
					</div>
					<div class="clearbt"></div>
					<div class="reghr-box">
						<hr class="reghr" style="width: 75%" />
					</div>
				</div>
				<h:form id="editForm">
					<p:messages id="messages" closable="true"><p:autoUpdate/></p:messages>
	
					<p:panel
						id="cert"
						header="资质证书"
						style="margin-bottom:10px;"
						styleClass="nureg-cont nuregcbox nuregcboxsty"
						widgetVar="certs"
					>
						<p:outputPanel id="cert" styleClass="certs" style="padding-top: 10px;">							
							<h2>资质证书</h2>
	
							<p:panelGrid>
								<p:row>
									<p:column>
										<p:outputLabel
											for="qualificationClass"
											value="资质类别"
										/>
									</p:column>
									<p:column colspan="5">
										<p:selectOneMenu
											id="qualificationClass"
											value="#{qualificationCertHome.instance.qualificationClass}"
											immediate="true"
											filter="true" 
											filterMatchMode="contains"
										>
											<f:selectItem
												itemLabel="请选择"
												itemValue="#{null}"
											/>
											<f:selectItems
												value="#{qualificationClassList.resultList}"
												var="_qc"
												itemLabel="#{_qc.name}"
												itemValue="#{_qc}"
											/>
											<f:converter converterId="entityConverter"></f:converter>
											<f:ajax listener="#{qualificationCertHome.changeQualificationClass}" render="cert}"></f:ajax>
										</p:selectOneMenu>
									</p:column>
								</p:row>			
								
								<c:forEach items="#{_cert.qualificationTemplates}" var="_qualificationTemplate" varStatus="_qtStatus">
									<p:row>
										<p:column>
											<p:outputLabel
												for="level_#{_qtStatus.index}"
												value="等级"
											/>
										</p:column>
										<p:column>
											<p:selectOneMenu
												id="level_#{_qtStatus.index}"
												value="#{_qualificationTemplate.qualificationLevel}"
												required="true"
												widgetVar="level_#{_qtStatus.index}"
											>
												<f:selectItem
													itemLabel="请选择"
													itemValue="#{null}"
												/>
												<f:selectItems
													value="#{_cert.qualificationClass.sortedLevelOptions}"
													var="_lo"
													itemLabel="#{_lo.name}"
													itemValue="#{_lo}"
												></f:selectItems>
												<f:converter converterId="entityConverter"></f:converter>	
												<f:ajax></f:ajax>
											</p:selectOneMenu>
										</p:column>
									
										<p:column>
											<p:outputLabel
												for="sector_#{_qtStatus.index}"
												value="行业范围"
											/>
										</p:column>
										<p:column colspan="2">
											<p:inputText
												id="sector_#{_qtStatus.index}"
												value="#{_qualificationTemplate.getSectorNames()}"
												required="true"
												readonly="true"
												widgetVar="sector_#{_qtStatus.index}"
											/>
											<p:commandButton
												oncomplete="PF('chooseSectorDialog').show();"
												value="选择"
												immediate="true"
												action="#{serviceSupplierHome.initRootNode()}"
												update="chooseSectorDialog"
											>
												<f:setPropertyActionListener
													value="#{_cert}"
													target="#{serviceSupplierHome.currentCert}"
												></f:setPropertyActionListener>
												<f:setPropertyActionListener
													value="#{_status.index}"
													target="#{serviceSupplierHome.currentCertIndex}"
												></f:setPropertyActionListener>
												<f:setPropertyActionListener
													value="#{_qualificationTemplate}"
													target="#{serviceSupplierHome.currentQualificationTemplate}"
												></f:setPropertyActionListener>
												<f:setPropertyActionListener
													value="#{_qtStatus.index}"
													target="#{serviceSupplierHome.currentQualificationTemplateIndex}"
												></f:setPropertyActionListener>
											</p:commandButton>
										</p:column>
										
										<p:column>
											<p:commandButton value="加行" action="#{qualificationCertHome.instance.addEmptyQualificationTemplate()}" update="certs" immediate="true"></p:commandButton>
											<p:commandButton value="删除" action="#{serviceSupplierHome.removeQualificationTemplate(_status.index,_qtStatus.index)}" update="@form:certs" immediate="true" rendered="#{_qtStatus.index > 0}"></p:commandButton>
										</p:column>
									</p:row>								
								</c:forEach>
								
								<p:row>
									<p:column>
										<p:outputLabel
											for="approveDate"
											value="批准时间"
										/>
									</p:column>
									<p:column>
										<p:calendar
											id="approveDate"
											value="#{qualificationCertHome.instance.approveDate}"
											required="true"
											pattern="yyyy-MM-dd"
											navigator="true"
											inputStyleClass="input-small"
											showOn="button"												
										>
										</p:calendar>
									</p:column>
									<p:column>
										<p:outputLabel
											for="approveLicenseNo"
											value="批准文号/资质证书号"
										/>
									</p:column>
									<p:column>
										<p:inputText
											id="approveLicenseNo"
											value="#{qualificationCertHome.instance.approveLicenseNo}"
											required="true"
										>
										</p:inputText>
									</p:column>
									<p:column>
										<p:outputLabel
											for="contactor"
											value="联系人"
										/>
									</p:column>
									<p:column>
										<p:inputText
											id="contactor"
											value="#{_qualificationCertHome.instance.contactor}"
											required="true"
											styleClass="input-small"
										>
										</p:inputText>
									</p:column>
								</p:row>
															
								<p:row>
									<p:column>
										<p:outputLabel
											for="contactorPhoneNumber#{_status.index}"
											value="联系人电话"
										/>
									</p:column>
									<p:column>
										<p:inputText
											id="contactorPhoneNumber#{_status.index}"
											value="#{qualificationCertHome.instance.contactorPhoneNumber}"
											required="true"
											styleClass="input-small"
										>
										</p:inputText>
									</p:column>
									<p:column>
										<p:outputLabel
											for="allotedDate"
											value="有效日期"
										/>
									</p:column>
									<p:column>
										<p:calendar
											id="allotedDate"
											value="#{qualificationCertHome.instance.allotedDate}"
											required="true"
											pattern="yyyy-MM-dd"
											navigator="true"
											inputStyleClass="input-small"
											showOn="button"
										>
										</p:calendar>
									</p:column>
									<p:column>
										<p:outputLabel
											for="approveDepartmentName"
											value="资质审核机关"
										/>
									</p:column>
									<p:column>
										<p:inputText
											id="approveDepartmentName"
											value="#{qualificationCertHome.instance.approveDepartmentName}"
											required="true"
										>
										</p:inputText>
									</p:column>
								</p:row>
								
								<p:row>
									<p:column>
										<p:outputPanel>
											<p:outputLabel
												for="certPhotos"
												value="单位资质证书"
											/>
											<br />
											（扫描图片上传）
										</p:outputPanel>
									</p:column>
									<p:column colspan="5">
										
										<p:outputPanel>												
											<p:fileUpload
												id="certPhotos"
												label="选择"
												mode="advanced"
												required="true"
												multiple="true"
												skinSimple="true"
												sizeLimit="#{1024 * 1024 * 3}"
												uploadLabel="上传"
												cancelLabel="取消"
												update="editForm:certPhotosList#{_status.index}"
												fileUploadListener="#{serviceSupplierHome.uploadCertPhotos}"
												allowTypes="/(\.|\/)(jpe?g|png)$/"
											/>
											<p:panel
												id="certPhotosList"
												widgetVar="certPhotosList">
												<p:dataList
													value="#{_cert.certPhotos}"
													var="_photo"
													rendered="#{_cert.certPhotos.size() > 0}"
													itemStyleClass="photoItem"
													varStatus="_certPhotoStatus"
												>
													<img  data-original="#{attachmentUtils.getFullPath(_photo)}" src="#{attachmentUtils.getFullPath(_photo)}"  width="240"/>
													
													<p:commandLink styleClass="closeBtn" action="#{serviceSupplierHome.removeCertPhoto(_photo)}" update="editForm:certPhotosList" immediate="true" ></p:commandLink>
												</p:dataList>
												<div style="clear: both" />
											</p:panel>
										</p:outputPanel>
									</p:column>
								</p:row>									
							</p:panelGrid>
						</p:outputPanel>
					</p:panel>
					
					<p:outputLabel id="actionButtons" rendered="#{not serviceSupplierHome.managed || request.isUserInRole('admin')}">
						<p:commandButton
							id="saveBtn"
							action="#{serviceSupplierHome.saveAndFlush()}"
							value="保存"
							ajax="true"
						/>
						<p:commandButton
							action="#{serviceSupplierHome.cancel()}"
							value="取消"
							immediate="true"
						></p:commandButton>
					</p:outputLabel>
		
					<p:blockUI block="editForm" trigger="saveBtn" />
				</h:form>
			
			</div>
		</div>		

		<p:dialog
			id="chooseSectorDialog"
			widgetVar="chooseSectorDialog"
			width="666"
			height="520"
			modal="true"
		>
			<h:form>
				<p:panel>
					<f:facet name="header">选择行业</f:facet>
					
					<p:scrollPanel style="height: 400px; border: 0px;" mode="native">
						<p:treeTable
							value="#{serviceSupplierHome.rootNodeMap[serviceSupplierHome.currentCertIndex][serviceSupplierHome.currentQualificationTemplateIndex]}"
							var="_sectorNode"
							rendered="#{not empty serviceSupplierHome.currentCert}"
							selectionMode="checkbox"
							selection="#{serviceSupplierHome.selectedNodeMap[serviceSupplierHome.currentCertIndex][serviceSupplierHome.currentQualificationTemplateIndex]}"
						>
							<p:column>
								<f:facet name="header">行业类别</f:facet>
								#{_sectorNode.name}
							</p:column>
						</p:treeTable>
					</p:scrollPanel>

					<f:facet name="footer">
						<p:commandButton
							value="确定"
							action="#{serviceSupplierHome.chooseSectors()}"
							update=":editForm:sector#{serviceSupplierHome.currentCertIndex}_#{serviceSupplierHome.currentQualificationTemplateIndex}"
							oncomplete="PF('chooseSectorDialog').hide();"
						/>
						<p:commandButton
							value="取消"
							onclick="PF('chooseSectorDialog').hide();"
						/>
					</f:facet>
				</p:panel>
			</h:form>
		</p:dialog>
		
	</ui:define>
</ui:composition>
